扩展基础组件库：el-upload 组件基础集成
概述
在内容管理模块中，创建/编辑课程功能使用抽屉（Drawer）+ 动态表单（Dynamic Form）的模式，其中课程封面部分需要集成 el-upload 上传组件。本节讲解如何在 VpForm 表单体系中集成 el-upload 的基础应用。
页面结构分析
内容管理的创建/编辑流程与用户管理模块高度相似，采用相同的交互模式：
内容管理/
├── 课程列表（Table）
├── 创建课程（Drawer + Form）
│ ├── 课程标题
│ ├── 课程描述
│ ├── 课程封面（el-upload） ← 本节重点
│ └── 其他字段
└── 编辑课程（Drawer + Form）
text
表单结构实现
参照用户管理模块的编辑功能，复用 VpForm 表单组件：
<!-- views/contents/index.vue -->
<template>
<div>
<!-- 数据表格 -->
<DataTable :columns="columns" :data="tableData" />
<!-- 创建/编辑抽屉 -->
<el-drawer
v-model="drawerVisible"
:title="isEdit ? '编辑课程' : '创建课程'"
direction="rtl"
size="450px"
>
<VpForm
ref="formRef"
:model="formData"
:schema="formSchema"
label-width="100px"
@submit="handleSubmit"
@cancel="handleCancel"
/>
</el-drawer>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { VpFormSchema } from '@/components/VpForm/types'
const drawerVisible = ref(false)
const isEdit = ref(false)
const formData = reactive<Record<string, any>>({})
const formSchema: VpFormSchema = [
{
field: 'title',
label: '课程标题',
component: 'el-input',
props: { placeholder: '请输入课程标题' },
},
{
field: 'cover',
label: '课程封面',
component: 'el-upload',
props: {
action: '/api/upload',
accept: 'image/*',
limit: 1,
},
},
]
function handleSubmit() {
// 提交逻辑
}
function handleCancel() {
drawerVisible.value = false
}
</script>
vue
el-upload 在 FormItem 中的集成
在 VpFormItem 组件中扩展对 el-upload 的支持：
<!-- components/VpFormItem.vue -->
<template>
<el-form-item :label="label" :prop="field">
<!-- 上传组件 -->
<el-upload
v-if="component === 'el-upload'"
:action="props.action"
:accept="props.accept"
:limit="props.limit || 1"
:file-list="modelValue"
:on-success="handleSuccess"
:on-remove="handleRemove"
>
<el-button type="primary">点击上传</el-button>
</el-upload>
<!-- 其他表单组件 -->
<component v-else :is="component" v-bind="props" v-model="modelValue" />
</el-form-item>
</template>
vue
核心代码结构
// 表单 Schema 定义
interface FormSchema {
field: string
label: string
component: string
props?: Record<string, any>
rules?: any[]
}
// el-upload 相关配置项
interface UploadProps {
action: string // 上传地址
accept?: string // 文件类型限制
limit?: number // 最大上传数量
maxSize?: number // 文件大小限制（MB）
drag?: boolean // 是否启用拖拽
multiple?: boolean // 是否允许多选
}
typescript
与 Element Plus 原生用法对比
| 特性 | 原生 el-upload | VpForm 集成 |
|---|---|---|
| 表单验证 | 需手动绑定 | 自动纳入 Form 校验 |
| 数据绑定 | v-model:file-list | 通过 schema 的 field 自动映射 |
| 样式定制 | 直接修改模板 | 通过 schema props 配置 |
| 事件处理 | @success 等原生事件 | 统一在 Form 层面处理 |
实践要点
- 本节仅涉及
el-upload在VpForm中的基础集成，尚未涉及完整的上传组件封装 - 后续章节将完善上传组件，兼容 Element Plus 官方的多种应用场景
- 创建/编辑功能的表单结构与用户管理模块复用度高，可对照实现
- 注意
el-drawer的direction属性设置为rtl（从右侧滑出）
↑